<template>
  <div class="payment-container max-w-8xl mx-auto px-4 pt-16 pb-32 sm:px-6 lg:px-4">
    <svg-icon className="block w-14 h-14 mx-auto"
      :isDiv="true"
      iconName='check'></svg-icon>
    <h1 class="text-34 text-gray-1000 text-center font-semibold mt-3 leading-normal">
      {{$t('payment_successfulNew')}}
    </h1>
    <p v-if="$route.query.type === 'submit'"
      class="text-base text-gray-1000 text-center mt-5">{{$t('user_weHaveReceivedYourToolSubmission')}}</p>

    <p v-if="$route.query.type === 'advertise'"
      class="text-base text-gray-1000 text-center mt-3">{{$t('user_yourAdBalanceHasBeen')}}</p>
    <p v-if="$route.query.type === 'advertise'"
      class="text-base text-gray-1000 text-center mt-5 max-w-xl mx-auto">{{$t('user_andTheAdvertisementIsReady')}}</p>
    <p v-if="$route.query.type === 'submitGpt'"
      class="text-base text-gray-1000 text-center mt-5">{{$t('user_weHaveReceived')}}</p>
    <div v-if="$route.query.type === 'updateAi'"
      class="mt-6 max-w-lg mx-auto">
      <div class="text-center text-lg text-gray-1000">{{$t('user_yourUpdatePortal',{num: String(countdown)})}}</div>
      <div class="text-center text-base text-gray-1000 mt-5">
        <span>
          {{$t('user_youCanAlso')}} &gt;
        </span>
        <common-link path="/user?tab=updateAi"
          class="text-purple-1300 hover:opacity-90">
          {{ $t('user_updateTool')}}
        </common-link>
      </div>
    </div>

    <div class="ctrl flex justify-center gap-3 mt-10"
      v-if="$route.query.type === 'submit'">
      <common-link path="/submit"
        class="inline-flex w-auto h-10 px-4 text-purple-1300 text-lg items-center justify-center border border-purple-1300 hover:bg-purple-2600 rounded">
        {{ $t('user_continueSubmitting')}}
      </common-link>
      <common-link path="/user?tab=submitAI"
        class="inline-flex w-auto h-10 px-4 text-white text-lg items-center justify-center bg-purple-1300 hover:opacity-90 rounded">
        {{  $t('user_viewYourSubmission')}}
      </common-link>
    </div>
    <div class="ctrl flex justify-center gap-3 mt-10"
      v-if="$route.query.type === 'advertise'">
      <common-link path="/advertise"
        class="inline-flex w-auto h-10 px-4 text-purple-1300 text-lg items-center justify-center border border-purple-1300 hover:bg-purple-2600 rounded">
        {{ $t('user_buyAgain')}}
      </common-link>
      <common-link path="/user?tab=advertise"
        class="inline-flex w-auto h-10 px-4 text-white text-lg items-center justify-center bg-purple-1300 hover:opacity-90 rounded">
        {{ $t('user_viewYourAdvertisement')}}
      </common-link>
    </div>
    <div class="ctrl mt-6 text-center"
      v-if="$route.query.type === 'updateAi'">
      <common-link path="/tool-update/:handle"
        :params="{ handle: order_sn}"
        class="flex w-full max-w-60 mx-auto h-12 px-4 text-white text-lg items-center justify-center bg-purple-1300 rounded"
        :class="{'cursor-not-allowed bg-opacity-90': !hasRealVal(order_sn), 'hover:opacity-90': hasRealVal(order_sn)}">
        {{ $t('user_updateToolNow',{num: String(countdown)})}}
      </common-link>
      <common-link path="/update-ai"
        class="flex w-full max-w-60 mx-auto h-12 px-4 text-purple-1300 text-lg items-center justify-center border border-purple-1300 hover:bg-purple-2600 rounded mt-3">
        {{ $t('user_buyAgain')}}
      </common-link>
      <common-link path="/user?tab=updateAi"
        class="inline-block text-gray-1000 text-md hover:text-purple-1300 underline mt-3">
        {{ $t('user_viewYourUpdates')}}
      </common-link>
    </div>

    <div class="ctrl flex justify-center gap-3 mt-10"
      v-if="$route.query.type === 'submitGpt'">
      <common-link path="/submit-gpt"
        class="inline-flex w-auto h-10 px-4 text-purple-1300 text-lg items-center justify-center border border-purple-1300 hover:bg-purple-2600 rounded">
        {{ $t('user_continueSubmitting')}}
      </common-link>
      <common-link path="/user?tab=submitGpt"
        class="inline-flex w-auto h-10 px-4 text-white text-lg items-center justify-center bg-purple-1300 hover:opacity-90 rounded">
        {{  $t('user_viewYourSubmission')}}
      </common-link>
    </div>
  </div>
</template>

<script>
import { mapState } from 'vuex'
export default {
  name: 'Payment',
  head() {
    return {
      htmlAttrs: {
        lang: this.locale,
      },
      meta: [
        {
          hid: 'og:url',
          name: 'og:url',
          content: this.canonicalLink,
        },
      ],
      link: [
        {
          rel: 'canonical',
          href: this.canonicalLink,
        },
      ],
    }
  },
  computed: {
    ...mapState({
      locale: (state) => state.locale,
      toolify_isLogin: (state) => state.toolify_isLogin,
    }),
  },
  created() {
    this.toCheckSession()
  },
  data() {
    return {
      canonicalLink: `https://www.toolify.ai${this.$route.fullPath}`,
      loading: true,

      countdown: 10,

      order_sn: null,
      timer: null,
    }
  },
  mounted() {
    if (this.$route.query.type === 'updateAi') {
      this.startCountdown()
    }
  },
  methods: {
    async toCheckSession() {
      try {
        const res = await this.$axiosApi.checkSession({
          session_id: this.$route.query.session_id,
        })

        if (res && res.code === 200 && res.data && res.data.order_sn) {
          this.order_sn = res.data.order_sn
        }

        this.loading = false
      } catch (error) {
        this.loading = false
      }
    },
    toHome() {
      this.$router.push({
        path: '/',
      })
    },
    startCountdown() {
      this.timer = setInterval(() => {
        if (this.countdown > 0) {
          this.countdown--
        } else {
          clearInterval(this.timer)
          if (this.order_sn) {
            this.$router.push({
              name:
                this.locale === 'en'
                  ? 'tool-update-handle'
                  : 'lang-tool-update-handle',
              params: {
                handle: this.order_sn,
              },
            })
          }
        }
      }, 1000)
    },
  },
  beforeDestroy() {
    if (this.timer) {
      clearInterval(this.timer)
    }
  },
}
</script>
